<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>走马灯</title>
    <link rel="stylesheet" href="./view/走马灯/styles.css">
</head>
<body>
<!-- Unnamed (Rectangle) -->
<div id="u9563" class="ax_default heading_1">
    <div id="u9563_div" class=""></div>
    <div id="u9563_text" class="text ">
        <p><span>Carousel 走马灯</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u9564" class="ax_default heading_1">
    <div id="u9564_div" class=""></div>
    <div id="u9564_text" class="text ">
        <p><span>概述</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u9565" class="ax_default label">
    <div id="u9565_div" class=""></div>
    <div id="u9565_text" class="text ">
        <p><span>常用于一组图片或卡片轮播，当内容空间不足时，可以用走马灯的形式进行收纳，进行轮播展现。</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u9566" class="ax_default label">
    <div id="u9566_div" class=""></div>
    <div id="u9566_text" class="text ">
        <p><span>基础用法</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u9567" class="ax_default label">
    <div id="u9567_div" class=""></div>
    <div id="u9567_text" class="text ">
        <p><span>手动点击切换</span></p>
    </div>
</div>

<!-- previous-next-btn (Group) -->
<div id="u9568" class="ax_default ax_default_hidden" data-label="previous-next-btn" style="display:none; visibility: hidden" data-left="245" data-top="436" data-width="501" data-height="38">

    <!-- Unnamed (Ellipse) -->
    <div id="u9569" class="ax_default ellipse">
        <img id="u9569_img" class="img " src="assets/images/走马灯/u9569.svg"/>
        <div id="u9569_text" class="text ">
            <p><span></span></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u9570" class="ax_default ellipse">
        <img id="u9570_img" class="img " src="assets/images/走马灯/u9569.svg"/>
        <div id="u9570_text" class="text ">
            <p><span></span></p>
        </div>
    </div>
</div>

<!-- carousel-dot-list (Group) -->
<div id="u9571" class="ax_default" data-label="carousel-dot-list" data-left="453" data-top="557" data-width="83" data-height="3">

    <!-- 1 (Rectangle) -->
    <div id="u9572" class="ax_default box_2 selected" data-label="1" selectiongroup="carousel-dot-list-1">
        <div id="u9572_div" class="selected"></div>
        <div id="u9572_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- 2 (Rectangle) -->
    <div id="u9573" class="ax_default box_2" data-label="2" selectiongroup="carousel-dot-list-1">
        <div id="u9573_div" class=""></div>
        <div id="u9573_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- 3 (Rectangle) -->
    <div id="u9574" class="ax_default box_2" data-label="3" selectiongroup="carousel-dot-list-1">
        <div id="u9574_div" class=""></div>
        <div id="u9574_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- 4 (Rectangle) -->
    <div id="u9575" class="ax_default box_2" data-label="4" selectiongroup="carousel-dot-list-1">
        <div id="u9575_div" class=""></div>
        <div id="u9575_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u9576" class="ax_default label">
    <div id="u9576_div" class=""></div>
    <div id="u9576_text" class="text ">
        <p><span>自动切换</span></p>
    </div>
</div>

<!-- Unnamed (Rectangle) -->
<div id="u9577" class="ax_default label">
    <div id="u9577_div" class=""></div>
    <div id="u9577_text" class="text ">
        <p><span>通过动态面板自动切换</span></p>
    </div>
</div>

<!-- image-content (Dynamic Panel) -->
<div id="u9578" class="ax_default" data-label="image-content">
    <div id="u9578_state0" class="panel_state" data-label="State1" style="">
        <div id="u9578_state0_content" class="panel_state_content">

            <!-- Unnamed (Image) -->
            <div id="u9579" class="ax_default image">
                <img id="u9579_img" class="img " src="assets/images/走马灯/u9446.png"/>
                <div id="u9579_text" class="text " style="display:none; visibility: hidden">
                    <p></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9580" class="ax_default label">
                <div id="u9580_div" class=""></div>
                <div id="u9580_text" class="text ">
                    <p><span>双击更换图片</span></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9581" class="ax_default label">
                <div id="u9581_div" class=""></div>
                <div id="u9581_text" class="text ">
                    <p><span>1</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u9578_state1" class="panel_state" data-label="State2" style="visibility: hidden;">
        <div id="u9578_state1_content" class="panel_state_content">

            <!-- Unnamed (Image) -->
            <div id="u9582" class="ax_default image">
                <img id="u9582_img" class="img " src="assets/images/走马灯/u9446.png"/>
                <div id="u9582_text" class="text " style="display:none; visibility: hidden">
                    <p></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9583" class="ax_default label">
                <div id="u9583_div" class=""></div>
                <div id="u9583_text" class="text ">
                    <p><span>双击更换图片</span></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9584" class="ax_default label">
                <div id="u9584_div" class=""></div>
                <div id="u9584_text" class="text ">
                    <p><span>2</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u9578_state2" class="panel_state" data-label="State3" style="visibility: hidden;">
        <div id="u9578_state2_content" class="panel_state_content">

            <!-- Unnamed (Image) -->
            <div id="u9585" class="ax_default image">
                <img id="u9585_img" class="img " src="assets/images/走马灯/u9446.png"/>
                <div id="u9585_text" class="text " style="display:none; visibility: hidden">
                    <p></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9586" class="ax_default label">
                <div id="u9586_div" class=""></div>
                <div id="u9586_text" class="text ">
                    <p><span>双击更换图片</span></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9587" class="ax_default label">
                <div id="u9587_div" class=""></div>
                <div id="u9587_text" class="text ">
                    <p><span>3</span></p>
                </div>
            </div>
        </div>
    </div>
    <div id="u9578_state3" class="panel_state" data-label="State4" style="visibility: hidden;">
        <div id="u9578_state3_content" class="panel_state_content">

            <!-- Unnamed (Image) -->
            <div id="u9588" class="ax_default image">
                <img id="u9588_img" class="img " src="assets/images/走马灯/u9446.png"/>
                <div id="u9588_text" class="text " style="display:none; visibility: hidden">
                    <p></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9589" class="ax_default label">
                <div id="u9589_div" class=""></div>
                <div id="u9589_text" class="text ">
                    <p><span>双击更换图片</span></p>
                </div>
            </div>

            <!-- Unnamed (Rectangle) -->
            <div id="u9590" class="ax_default label">
                <div id="u9590_div" class=""></div>
                <div id="u9590_text" class="text ">
                    <p><span>4</span></p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- previous-next-btn (Group) -->
<div id="u9591" class="ax_default ax_default_hidden" data-label="previous-next-btn" style="display:none; visibility: hidden" data-left="815" data-top="436" data-width="501" data-height="38">

    <!-- Unnamed (Ellipse) -->
    <div id="u9592" class="ax_default ellipse">
        <img id="u9592_img" class="img " src="assets/images/走马灯/u9569.svg"/>
        <div id="u9592_text" class="text ">
            <p><span></span></p>
        </div>
    </div>

    <!-- Unnamed (Ellipse) -->
    <div id="u9593" class="ax_default ellipse">
        <img id="u9593_img" class="img " src="assets/images/走马灯/u9569.svg"/>
        <div id="u9593_text" class="text ">
            <p><span></span></p>
        </div>
    </div>
</div>

<!-- carousel-dot-list (Group) -->
<div id="u9594" class="ax_default" data-label="carousel-dot-list" data-left="1023" data-top="557" data-width="83" data-height="3">

    <!-- 1 (Rectangle) -->
    <div id="u9595" class="ax_default box_2 selected" data-label="1" selectiongroup="carousel-dot-list-1">
        <div id="u9595_div" class="selected"></div>
        <div id="u9595_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- 2 (Rectangle) -->
    <div id="u9596" class="ax_default box_2" data-label="2" selectiongroup="carousel-dot-list-1">
        <div id="u9596_div" class=""></div>
        <div id="u9596_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- 3 (Rectangle) -->
    <div id="u9597" class="ax_default box_2" data-label="3" selectiongroup="carousel-dot-list-1">
        <div id="u9597_div" class=""></div>
        <div id="u9597_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>

    <!-- 4 (Rectangle) -->
    <div id="u9598" class="ax_default box_2" data-label="4" selectiongroup="carousel-dot-list-1">
        <div id="u9598_div" class=""></div>
        <div id="u9598_text" class="text " style="display:none; visibility: hidden">
            <p></p>
        </div>
    </div>
</div>
</body>
</html>
